<!--<template>-->
<!--  <div>-->
<!--    <div id="container"></div>-->
<!--    <input type="text" v-model="coordinates" @input="generateRedPoint" placeholder="输入坐标点位置(x, y, z)">-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import * as THREE from "three";-->
<!--  import { OBJMTLLoader } from "three-obj-mtl-loader";-->
<!--  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';-->
<!--  import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';-->

<!--  export default {-->
<!--    data() {-->
<!--      return {-->
<!--        coordinates: "",-->
<!--        pointLabelDom: null,-->
<!--        points: [],-->
<!--        scene: null,-->
<!--        camera: null,-->
<!--        renderer: null,-->
<!--        labelRenderer: null,-->
<!--        events: {-->
<!--          raycaster: new THREE.Raycaster(),-->
<!--          pickedObject: null,-->
<!--          pickedObjectSavedColor: 0,-->
<!--          pickPosition: new THREE.Vector2(),-->
<!--        },-->
<!--      };-->
<!--    },-->
<!--    methods: {-->
<!--      generateRedPoint() {-->
<!--        const coords = this.coordinates.split(",").map(coord => parseFloat(coord.trim()));-->
<!--        if (coords.length === 3 && !isNaN(coords[0]) && !isNaN(coords[1]) && !isNaN(coords[2])) {-->
<!--          const pointGeometry = new THREE.BufferGeometry();-->
<!--          pointGeometry.setAttribute('position', new THREE.Float32BufferAttribute(coords, 3));-->
<!--          const pointMaterial = new THREE.PointsMaterial({ color: 0xff0000 });-->
<!--          const point = new THREE.Points(pointGeometry, pointMaterial);-->
<!--          point.position.set(coords[0], coords[1], coords[2]);-->
<!--          this.scene.add(point);-->
<!--        }-->
<!--      },-->
<!--      loadMTL() {-->
<!--        const objmtlLoader = new OBJMTLLoader();-->
<!--        const scene = this.scene;-->

<!--        objmtlLoader.load('/statics/Tile_11.obj', '/statics/Tile_11.mtl', (obj) => {-->
<!--          obj.position.set(0, 0, 0);-->
<!--          obj.scale.set(3, 3, 3);-->
<!--          obj.name = "模型名称";-->
<!--          scene.add(obj);-->

<!--          this.animate();-->
<!--        }, (xhr) => {-->
<!--          console.log((xhr.loaded / xhr.total) * 100 + '% loaded');-->
<!--        }, (error) => {-->
<!--          console.log(error);-->
<!--          console.log('An error happened');-->
<!--        });-->
<!--      },-->
<!--      initScene() {   0-->
<!--        this.scene = new THREE.Scene();-->
<!--        const ambientLight = new THREE.AmbientLight(0xaf8e00);-->
<!--        ambientLight.intensity = 1;-->
<!--        const directionalLight = new THREE.DirectionalLight(0xdfebff, 0.45);-->
<!--        directionalLight.position.set(1, 2, 1);-->
<!--        this.scene.add(ambientLight);-->
<!--        this.scene.add(directionalLight);-->
<!--      },-->
<!--      initCamera() {-->
<!--        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);-->
<!--        const r = 20;-->
<!--        const theta = Math.PI / 4;-->
<!--        const phi = Math.PI / 4;-->
<!--        const x = r * Math.sin(theta) * Math.cos(phi);-->
<!--        const y = r * Math.sin(theta) * Math.sin(phi);-->
<!--        const z = r * Math.cos(theta);-->
<!--        this.camera.position.set(x, y, z);-->
<!--        this.camera.lookAt(new THREE.Vector3(0, 0, 0));-->
<!--        const pointLight = new THREE.PointLight(0xffffff, 1, 100);-->
<!--        pointLight.position.set(0, 0, 100);-->
<!--        this.scene.add(pointLight);-->
<!--        this.scene.add(this.camera);-->
<!--      },-->
<!--      initRenderer() {-->
<!--        this.renderer = new THREE.WebGLRenderer();-->
<!--        const container = document.getElementById("container");-->
<!--        const width = container.clientWidth;-->
<!--        const height = container.clientHeight;-->
<!--        this.renderer.setSize(width, height);-->
<!--        this.renderer.setClearColor(0x0000ff, 1);-->
<!--        container.appendChild(this.renderer.domElement);-->
<!--        this.renderer.setPixelRatio(window.devicePixelRatio);-->
<!--        this.labelRenderer = new CSS2DRenderer();-->
<!--        this.labelRenderer.setSize(width, height);-->
<!--        this.labelRenderer.domElement.style.position = "absolute";-->
<!--        this.labelRenderer.domElement.style.top = 0;-->
<!--        this.labelRenderer.domElement.style.pointerEvents = 'none';-->
<!--        this.labelRenderer.domElement.className = "allLabel";-->
<!--        container.appendChild(this.labelRenderer.domElement);-->
<!--      },-->
<!--      initOrbitControls() {-->
<!--        const controls = new OrbitControls(this.camera, this.renderer.domElement);-->
<!--        controls.enableZoom = true;-->
<!--        controls.enablePan = true;-->
<!--        controls.enableRotate = true;-->
<!--        controls.target.set(0, 0, 0);-->
<!--        controls.update();-->
<!--      },-->
<!--      clickEvents() {-->
<!--        const container = document.getElementById("container");-->
<!--        container.addEventListener("click", this.clickPickPosition);-->
<!--      },-->
<!--      dispose() {-->
<!--        const container = document.getElementById("container");-->
<!--        container.removeEventListener("click", this.clickPickPosition);-->
<!--      },-->
<!--      updatePosition(event) {-->
<!--        const container = document.getElementById("container");-->
<!--        const rect = container.getBoundingClientRect();-->
<!--        const x = event.clientX - rect.left;-->
<!--        const y = event.clientY - rect.top;-->
<!--        this.events.pickPosition.x = (x / container.clientWidth) * 2 - 1;-->
<!--        this.events.pickPosition.y = -(y / container.clientHeight) * 2 + 1;-->
<!--      },-->
<!--      clickPickPosition(event) {-->
<!--        this.updatePosition(event);-->
<!--        this.pickEvents(this.events.pickPosition, this.scene, this.camera, (obj, intersectedObjects) => {-->
<!--          obj.userData.checked = !obj.userData.checked;-->
<!--          if (!obj.userData.checked) {-->
<!--            obj.material.emissive.setHex(this.events.pickedObjectSavedColor);-->
<!--          } else {-->
<!--            obj.material.emissive.setHex(0xFFFF00);-->
<!--          }-->
<!--          const text = obj.name;-->
<!--          this.scene.add(this.pointLabelDom);-->
<!--          const pointGeometry = new THREE.BufferGeometry();-->
<!--          const pointMaterial = new THREE.PointsMaterial({ color: 0xff0000 });-->
<!--          const point = new THREE.Points(pointGeometry, pointMaterial);-->
<!--          point.position.copy(obj.position);-->
<!--          this.scene.add(point);-->
<!--          this.points.push(point);-->
<!--        });-->
<!--      },-->
<!--      removePoints() {-->
<!--        for (const point of this.points) {-->
<!--          this.scene.remove(point);-->
<!--        }-->
<!--        this.points = [];-->
<!--      },-->
<!--      pickEvents(normalizedPosition, scene, camera, callback) {-->
<!--        let raycaster = this.events.raycaster;-->
<!--        raycaster.setFromCamera(normalizedPosition, camera);-->
<!--        let intersectedObjects = [];-->
<!--        if (this.events.pickedObject) {-->
<!--          this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);-->
<!--          this.events.pickedObject = undefined;-->
<!--        }-->
<!--        this.events.raycaster.setFromCamera(normalizedPosition, camera);-->
<!--        intersectedObjects = this.events.raycaster.intersectObjects(scene.children);-->
<!--        raycaster.intersectObjects(scene.children, true, intersectedObjects);-->
<!--        if (intersectedObjects.length) {-->
<!--          this.events.pickedObject = intersectedObjects[0].object;-->
<!--          this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();-->
<!--          this.events.pickedObject.material.emissive.setHex(0xFFFF00);-->
<!--          this.pointLabelDom = this.createLabelObj(-->
<!--            intersectedObjects[0].object.name,-->
<!--            intersectedObjects[0].point.x,-->
<!--            intersectedObjects[0].point.y,-->
<!--            intersectedObjects[0].point.z-->
<!--          );-->
<!--          const pointGeometry = new THREE.BufferGeometry();-->
<!--          pointGeometry.setAttribute('position', new THREE.Float32BufferAttribute([-->
<!--            intersectedObjects[0].point.x,-->
<!--            intersectedObjects[0].point.y,-->
<!--            intersectedObjects[0].point.z-->
<!--          ], 3));-->
<!--          const pointMaterial = new THREE.PointsMaterial({ color: 0xff0000 });-->
<!--          const point = new THREE.Points(pointGeometry, pointMaterial);-->
<!--          point.position.copy(point.position);-->
<!--          this.scene.add(point);-->
<!--          scene.add(this.pointLabelDom);-->
<!--          if (callback) {-->
<!--            callback(this.events.pickedObject);-->
<!--          }-->
<!--        }-->
<!--      },-->
<!--      createLabelObj(text, x, y, z) {-->
<!--        const labelDiv = document.createElement("div");-->
<!--        labelDiv.className = "laber_name";-->
<!--        labelDiv.innerHTML = text;-->
<!--        const pointLabel = new CSS2DObject(labelDiv);-->
<!--        pointLabel.position.set(x, y + 0.5, z);-->
<!--        return pointLabel;-->
<!--      },-->
<!--      init() {-->
<!--        this.initScene();-->
<!--        this.initCamera();-->
<!--        this.initRenderer();-->
<!--        this.initOrbitControls();-->
<!--        this.loadMTL();-->
<!--        this.clickEvents();-->
<!--      },-->
<!--      animate() {-->
<!--        requestAnimationFrame(this.animate);-->
<!--        this.renderer.render(this.scene, this.camera);-->
<!--        this.labelRenderer.render(this.scene, this.camera);-->
<!--      },-->
<!--    },-->
<!--    mounted() {-->
<!--      this.init();-->
<!--    },-->
<!--  };-->
<!--</script>-->

<!--<style scoped>-->
<!--  #container {-->
<!--    width: 100vw;-->
<!--    height: 80vh;-->
<!--  }-->

<!--  .laber_name {-->
<!--    pointer-events: none;-->
<!--    width: 50px;-->
<!--    height: 50px;-->
<!--    background-color: white;-->
<!--    display: block;-->
<!--  }-->
<!--</style>-->
